import React, { Component } from 'react'
// 作者列表页数据
import { fetchArt, delArt } from '@/api'
// 引入antd组件
import { Button, Table, Image, Tooltip, Tag, Modal, message  } from 'antd'
// 引入时间格式化组件dayjs
import dayjs from 'dayjs'
// 定义类组件ArtList并导出
// import { ExclamationCircleOutlined } from '@ant-design/icons';
export default class ArtList extends Component {
  constructor(){
    super();
    this.state = {
      /* 初始化文章列表 */
      ariLists: [],
      /* 初始化总条数 */
      total: 0,
      /* 当前页 */
      current: 1,
      /* 一页十条 */
      pageSize: 10
    }
  };
  render() {
    // 表的结构
    const columns = [
      {
        title: '作者',
        dataIndex: 'author',
        key: 'author'
      },
      {
        title: '标题',
        dataIndex: 'title',
        key: 'title'
      },
      {
        title: '描述',
        dataIndex: 'desc',
        render: (value) => {
          return (
            /* 鼠标移上去显示全部文字 */
            <Tooltip title={value}>
              {/* 文章描述超出十个字就用...隐藏 */}
              <span>
                { value.substr(0,10)+ '...' }
              </span>
            </Tooltip>
          )
        },
        key: 'desc'
      },
      {
        title: '封面图片',
        dataIndex: 'thumb',
        /* value图片路径地址 row每一行的信息 index下标 */
        render: (value,row,index) => {
          /* image组价可放大缩小 */
          return <Image src={value} width={50}/>
        },
        key: 'thumb'
      },
      {
        title: '点赞次数',
        dataIndex: 'zan',
        /* 参数value 点赞次数 */
        render: (value) => {
          return (
            /* 点赞数大于500则显示红色，否则显示蓝色 */
            <Tag color={ value>500?'red':'blue' }>
              {value}
            </Tag>
          )
        },
        key: 'zan'
      },
      {
        title: '创建时间',
        dataIndex: 'createAt',
        render:(value)=>{
          return (
            <span>
              {/* 格式化时间的格式 */}
              { dayjs(value).format('YYYY-MM-DD hh:mm:ss MMM') }
            </span>
          )
        },
        key: 'createAt'
      },
      {
        title: '操作',
        render: (row) => {
          return (
            <>
              <Button 
              /* 尺寸 */
              size="small"
              /* 按钮类型 */ 
              type="primary"
              /* 点击按钮触发 */
              onClick = {
                () => {
                  /* 跳转到文章编辑页 */
                  this.props.history.push(`/admin/artEdit/${row.id}`)
                }
              }>编辑</Button>
              <Button 
              size="small" 
              danger
              /* 点击时调用删除的方法 传入参数id */
              onClick = {
                () => {
                  this.delArt(row.id)
                }
              }>删除</Button>
            </>
          )
        },
        key: 'action'
      }
    ];
    return (
      <div style={{margin: 20}}>
          <Button onClick = {
            () => {
              /* 跳转到增加页 */
              this.props.history.push('/admin/artAdd')
            }
          }>增加文章</Button>
          <Table 
            rowKey="id" 
            dataSource={this.state.ariLists}
            /* 分页数据 */ 
            pagination = {{
              current: this.state.current,
              /* 一页多少条 */
              pageSize: this.state.pageSize,
              /* 数据总数 */
              total: this.state.total,
              onChange: this.pageChange
            }}
            columns={columns} />
      </div>
    )
  };
  componentDidMount(){
    this.fetchArt();
  };
  /* 删除文章 */
  delArt = (id) => {
  /* 删除的提示信息 */
  Modal.confirm({
      title: '删除文章？',
      /* 删除的图标 */
      // icon: <ExclamationCircleOutlined />,
      content: '真的要删除吗？',
      /* ok */
      onOk:()=>{
        /* 通过id删除 */
        delArt({id}).then(res=>{
          /* 服务器响应 */
          if(res.data.code === 200){
            /* 成功的回调 */
            message.success(res.data.msg, 2, ()=>{
              /* 跳转到当前路由 */
              this.props.history.go(0)
            })
          }
        })
      },
      /* 取消 */
      onCancel(){

      },
    })
  }
  pageChange = (current,pageSize) => {
    // 切换下一页数据
    console.log(current,pageSize);
    /* 设置state中的pagesize */
    this.setState({
      current,
      pageSize
    }, () => {
      /* 请求文章列表 */
      this.fetchArt();
    });
    
  };
  fetchArt = () =>{
    /* 发送请求 */
    fetchArt({
      /* 传当前页数和一页多少条 */
      current: this.state.current,
      pageSize: this.state.pageSize
    }).then(res=>{
      /* 服务器响应成功 */
      if(res.data.code === 200) {
        /* 改变state中的数据 */
        this.setState({
          /* 返回的文章放到数组中 */
          ariLists: res.data.data.lists,
          /* 返回的文章总数放到total中 */
          total: res.data.data.total
        })
      }
    })
  }
}
